<template>
  <page-wrap>
    <div class="orderdetails-container">
      <div class="orderdetails-container-main">
        <div class="orderdetails-main-item">
          <div class="item-header">
            <div class="item-header-right">
              预点单单号：{{ route.query.consumeCode }}
            </div>  
            <div class="item-header-left">{{ info.roomName }}</div>
          </div>
          <div class="item-below">
            <div class="container-main-content">
              <div class="main-content-title">
                <div class="item-below-title">商品信息</div>
                <div class="item-below-time">
                  <div class="item-below-line"></div>
                  <div class="item-below-value">
                    下单时间： {{ info.OrderTime }}
                    <!-- 下单时间： {{ dayjs(info.orderTime).format('YYYY-MM-DD') }}
                    {{ dayjs(info.orderTime).format('HH:mm:ss') }} -->
                  </div>
                  <div class="item-below-line"></div>
                </div>
              </div>

              <div class="main-content-item" v-for="(vi, ki) in info.GoodsList" :key="ki" >
                <div v-if="!vi.SubGoods">
                  <div class="content-item-name">
                    {{ vi.GoodsName }}
                  </div>
                  <div class="content-item-value">
                    <div class="item-value-specifications">
                      规格：{{ vi.Flavor }}
                    </div>
                    <div class="item-value-num">×{{ vi.OrderQty }}</div>
                    <div class="item-value-price">
                      ￥{{ (vi.TotalAmt) }}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <van-collapse  v-model="activeNames"  class="main-content-package"  :accordion="false" :is-link="false"  v-for="(packageItem, packageIndex) in info.GoodsList"  :key="packageIndex" >
                  <van-collapse-item :name="packageItem.orderBatchCode + packageIndex"  @click="toggleActive(packageIndex)" v-if="packageItem.SubGoods" >
                    <template v-slot:title>
                      <div class="package-header">
                        <div class="package-header-title">
                          {{ packageItem.GoodsName }}
                        </div> 
                        <img :src="customIcon" style="width: 16px; height: 16px; margin-left: 8px" class="package-img-icon" :class="{  overturn: packageItem.IsShow }" />
                      </div>
                      <div class="package-main">
                        <div class="package-main-num">
                          数量：{{ packageItem.OrderQty }}{{ packageItem.UomName }}
                        </div>
                        <div class="package-main-price">
                          ￥{{ (packageItem.TotalAmt) }}
                        </div>
                      </div>
                    </template>
                    <template v-slot:default v-if="packageItem.IsShow">
                      <div class="package-footer"  v-for="( packageGoods, packageGoodsInex ) in packageItem.SubGoods" :key="packageGoodsInex" @click.stop="">
                        <div class="package-footer-name">
                          {{ packageGoods.GoodsName }}
                        </div>
                        <div class="package-footer-value">
                          <div class="package-specifications">
                            <!-- 规格：{{ packageGoods.standard }} -->
                            规格：{{ packageGoods.Flavor }} 
                          </div>
                          <div class="package-num">
                            ×{{ packageGoods.OrderQty }}
                          </div>
                          <div class="package-price">
                            ￥{{ (packageGoods.TotalAmt) }}
                          </div>
                        </div>
                      </div>
                    </template>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>
          <div class="item-main">
            <div class="item-main-id">
              付款单号：{{ info.payBatchCode ? info.payBatchCode : '-- --' }}
            </div>
            <ul class="item-main-ul">
              <li class="item-main-li">
                <div class="li-left">会员姓名</div>
                <div class="li-right">
                  {{ info.MemberName || '-- --' }}
                </div>
              </li>
              <li class="item-main-li">
                <div class="li-left">会员电话</div>
                <div class="li-right">
                  {{ info.MemberMobile || '-- --' }}
                </div>
              </li>
              <li class="item-main-li">
                <div class="li-left">付款状态</div>
                <!-- <div class="li-right spe" :class="{ turnRed: info.state === '未支付' || info.state === '已取消' }" >
                  {{ info.state }}
                </div> -->
                <div class="li-right spe">
                  {{ info.PayStateName }}
                </div> 
              </li>
              <li class="item-main-li">
                <div class="li-left">付款时间</div>
                <div class="li-right" v-if="info.LastTime">
                  {{ info.LastTime }} 
                </div>
                <div class="li-right" v-else>-- --</div>
              </li>
              <li class="item-main-li">
                <div class="li-left">订单金额</div>
                <div class="li-right">{{ info.TotalAmt || '-- --' }}</div>
              </li>
              <li class="item-main-li">
                <div class="li-left">金币抵扣</div>
                <div class="li-right">{{ info.Coin || '-- --' }}</div>
              </li>
              <li class="item-main-li">
                <div class="li-left">实际支付</div>
                <div class="li-right">{{ info.RealAmt || '-- --' }}</div>
              </li> 
              <li class="item-main-li">
                <div class="li-left">支付方式</div>
                <div class="li-right" v-if="info.operType === '2'">
                  赠送支付
                </div>
                <div class="li-right" v-else>
                  {{ info.PayTypeName || '-- --' }}
                </div>
              </li>
              <li class="item-main-li">
                <div class="li-left">收款位置</div>
                <div class="li-right">{{ info.PayPosition }}</div> 
              </li>
              <li class="item-main-li">
                <div class="li-left">备注</div>
                <div class="li-right">{{ info.Remark || '无' }}</div>
              </li>
            </ul>
          </div>

          <div class="item-footer"> 
          </div>
        </div>
      </div>
    </div>
  </page-wrap>
  <!-- 确认提示 -->
  <z-dialog v-model:show="shouldConfirm"  content="是否补打台单？"  @confirm="print" ></z-dialog>
</template>

<script setup>
import dayjs from 'dayjs'
import v_triangle from '@/assets/svg/details/v_details-triangle.svg'
import v_triangle1 from '@/assets/svg/details/v_details-triangle1.svg'
import Api from '@/api'
import { showToast } from 'vant'
const route = useRoute()

const info = ref({})

//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
// function formatNumber (num) {
//   if (num) {
//     return num.toFixed(2)
//   } else {
//     return 0
//   }
// }
//--------------------------------------套餐折叠-----------------------------------------------
const activeNames = ref(['']) // 当前展开面板的 name
const customIcon = ref(v_triangle)

// 翻转三角按钮
const toggleActive = packageIndex => {
  info.value.GoodsList[packageIndex].IsShow = !info.value.GoodsList[packageIndex].IsShow 
}
// ------------------------------------------补打台单-----------------------------------------------
const shouldConfirm = ref(false)
const touch = val => {
  shouldConfirm.value = true
}
const print = () => {
  Api.Common.AppObjProcess.Do({
    functionName: 'OrderAddPrint',
    contentData: { orderBatchCode: info.value.orderBatchCode }
  }).then(res => {
    showToast('补打台单成功')
    shouldConfirm.value = false
  })
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {
  Api.Common.AppObjProcess.Do({ functionName: 'MemberOrderInfoBefore', contentData: { consumeCode: route.query.consumeCode } }).then(res => {
    let result = res  
    console.log('MemberOrderInfoBefore:',result)
    result?.GoodsList?.forEach(item => {
      item.SubGoods ? item['IsShow'] = false : ''
      // item?.SubGoods?.forEach((subitem) => { 
      //   subitem['IsShow'] = false
      // }) 
    })
    info.value = result
    console.log('MemberOrderInfoBefore:',info.value)
  })
}
onInit()
</script>

<style scoped lang="scss">
::v-deep(.van-cell) {
  padding: 0;
}
::v-deep(.van-cell--clickable) {
  background: #28282e;
}
::v-deep(.van-cell__right-icon) {
  display: none;
}
::v-deep(.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after) {
  border: none;
}
::v-deep(.van-collapse-item__content) {
  padding: 0;
  background: #28282e;
}
::v-deep(.van-collapse-item__title--expanded:after) {
  border: none;
}
::v-deep(.van-icon__image) {
  // transform: rotate(180deg);
}
::v-deep(.van-icon__image.clicked) {
  transform: rotate(180deg);
}
.orderdetails-container {
  .orderdetails-container-main {
    padding: 10px 12px;
    .orderdetails-main-item {
      padding: 18px 0 0px;
      background: #28282e;
      border-radius: 8px;
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px 18px;
        border-bottom: 1px solid #383840;
        .item-header-left {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 18px;
        }
        .item-header-right {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 13px;
        }
      }
      .item-main {
        padding: 0 12px;
        border-bottom: 1px solid #383840;
        .item-main-id {
          padding: 20px 0;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 13px;
          color: #ffffff;
          line-height: 13px;
        }
        .item-main-ul {
          padding: 0 12px;
          .item-main-li {
            list-style: none;
            padding-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .li-left {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #cccccc;
              line-height: 14px;
            }
            .li-right {
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 13px;
              &.spe {
                color: #ffaa00;
              }
              &.turnRed{
                color: #FF3333 !important;
              }
            }
          }
        }
      }
      .item-below {
        border-top: 1px solid #383840;
        border-bottom: 1px dashed #999999;
        .container-main-content {
          background: #28282e;
          .main-content-title {
            padding: 20px 0 20px 0;
            .item-below-title {
              text-align: center;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #ffffff;
              line-height: 18px;
              padding-bottom: 12px;
            }
            .item-below-time {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .item-below-value {
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                line-height: 13px;
              }
              .item-below-line {
                width: 60px;
                height: 1px;
                background: #999999;
                border-radius: 0px;
              }
            }
          }
          .main-content-id {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #cccccc;
            line-height: 13px;
            padding: 0 0 20px 12px;
          }
          .main-content-item {
            .content-item-name {
              padding: 0 0 12px 22px;
              font-size: 16px;
              color: #ffffff;
              line-height: 16px;
            }
            .content-item-value {
              display: flex;
              flex-wrap: wrap;
              padding: 0 34px 20px 34px;
              div {
                font-size: 14px;
                flex-basis: 33.33%;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
                line-height: 14px;
              }
              .item-value-specifications {
                // margin-left: 34px;
              }
              .item-value-num {
                text-align: center;
              }
              .item-value-price {
                color: #ffffff;
                text-align: right;
              }
            }
          }
          .main-content-package {
            .package-header {
              display: flex;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 16px;
              &-title {
                padding: 0 0 14px 22px;
              }
              .package-img-icon {
                width: 16px;
                height: 16px;
                margin-left: 8px;
                &.overturn {
                  transform: rotate(180deg);
                }
              }
            }
            .package-main {
              display: flex;
              justify-content: space-between;
              padding: 0 34px 12px 34px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 14px;
              &-num {
                color: #cccccc;
              }
              &-price {
                color: #ffffff;
              }
            }

            .package-footer {
              .package-footer-name {
                padding: 0 0 12px 34px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
              }
              .package-footer-value {
                display: flex;
                flex-wrap: wrap;
                padding: 0 34px 20px 46px;
                div {
                  font-size: 14px;
                  flex-basis: 33.33%;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                  line-height: 14px;
                }
                .package-specifications {
                }
                .package-num {
                  text-align: center;
                  flex-basis: calc(33.33% - 12px);
                }
                .package-price {
                  color: #cccccc;
                  text-align: right;
                  flex-basis: calc(33.33% + 12px);
                }
              }
            }
          }
          .main-content-footer {
            display: flex;
            justify-content: space-between;
            align-content: center;
            font-family: PingFang SC;
            font-weight: 500;
            margin: 0 12px 0 12px;
            border-bottom: 1px solid #383840;
            .footer-order {
              padding: 4px 8px 4px 8px;
              font-size: 13px;
              color: #cccccc;
              line-height: 13px;
              background: #45454d;
              border-radius: 2px;
              margin-bottom: 20px;
            }
            .footer-right {
              display: flex;
              margin-bottom: 22px;
              // align-content:flex-end;

              &-all {
                font-size: 12px;
                color: #cccccc;
                line-height: 12px;
                align-self: flex-end;
              }
              &-value {
                font-size: 18px;
                color: #ffaa00;
                line-height: 18px;
                align-self: flex-end;
              }
            }
          }
        }
      }
      .item-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 12px;

        .item-footer-button {
          width: 80px;
          text-align: center;
          margin-left: 10px;
          background: #5c5c66;
          border-radius: 4px;
          padding: 9px 0;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 14px;
        }
      }
    }
  }
}
</style>
